/**
 * Created by Hxr on 2018/1/12.
 */
import PropTypes from 'prop-types';
import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    Platform
} from 'react-native';

class Avatar extends Component {
    constructor(props){
        super(props)
    }

    render(){
        const {
            component,
            onPress,
            onLongPress,
            containerStyle,
            source,
            small,
            medium,
            large,
            xlarge,
            avatarStyle,
            rounded,
            title,
            titleStyle,
            overlayContainerStyle,
            imageProps,
            ...attributes
        } = this.props;

        let { width, height } = this.props;

        if (small) {
            width = 34;
            height = 34;
        } else if (medium) {
            width = 50;
            height = 50;
        } else if (large) {
            width = 75;
            height = 75;
        } else if (xlarge) {
            width = 150;
            height = 150;
        } else if (!width && !height) {
            width = 34;
            height = 34;
        } else if (!width) {
            width = height;
        } else if (!height) {
            height = width;
        }

        let titleSize = width / 2;
        let iconSize = width / 2;

        let Component = onPress || onLongPress ? TouchableOpacity : View;
        if (component) {
            Component = component;
        }
        const styles = StyleSheet.create({
            container: {
                paddingTop: 10,
                paddingRight: 10,
                paddingBottom: 10,
                backgroundColor: 'transparent',
                width: width,
                height: height,
            },
            avatar: {
                width: width,
                height: height,
            },
            overlayContainer: {
                flex: 1,
                alignItems: 'center',
                backgroundColor: 'rgba(0,0,0,0.2)',
                alignSelf: 'stretch',
                justifyContent: 'center',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
            },
            title: {
                color: '#ffffff',
                fontSize: titleSize,
                backgroundColor: 'rgba(0,0,0,0)',
                textAlign: 'center',
            }
        });
        const renderContent = () => {
            if (source) {
                return (
                    <Image
                        style={[
                            styles.avatar,
                            rounded && { borderRadius: width / 2 },
                            avatarStyle && avatarStyle,
                        ]}
                        source={source}
                        {...imageProps}
                    />
                );
            } else if (title) {
                return (
                    <Text style={[styles.title, titleStyle && titleStyle]}>
                        {title}
                    </Text>
                );
            }
        };
        return (
            <Component
                {...attributes}
                onPress={onPress}
                onLongPress={onLongPress}
                style={[
                    styles.container,
                    rounded && { borderRadius: width / 2 },
                    containerStyle && containerStyle,
                ]}
            >
                <View
                    style={[
                        styles.overlayContainer,
                        rounded && { borderRadius: width / 2 },
                        overlayContainerStyle && overlayContainerStyle,
                        Platform.OS == 'harmony' &&{ zIndex:1 }
                    ]}
                >
                    {renderContent()}
                </View>

            </Component>
        );
    }
}

Avatar.propTypes = {
    component: PropTypes.oneOf([
        View,
        TouchableOpacity,
        TouchableHighlight,
        TouchableNativeFeedback,
        TouchableWithoutFeedback,
    ]),
    width: PropTypes.number,
    height: PropTypes.number,
    onPress: PropTypes.func,
    onLongPress: PropTypes.func,
    containerStyle: PropTypes.any,
    source: Image.propTypes.source,
    avatarStyle: PropTypes.any,
    rounded: PropTypes.bool,
    title: PropTypes.string,
    titleStyle: Text.propTypes.style,
    overlayContainerStyle: PropTypes.any,
    small: PropTypes.bool,
    medium: PropTypes.bool,
    large: PropTypes.bool,
    xlarge: PropTypes.bool,
    imageProps: PropTypes.object,
};
export default Avatar;